<template>
  <div class="home">
    <!--1.  顶部区域布局---------- -->
    <div class="header">
      <div class="item">
        总销售额
        <div class='num'>{{ totalData.saleTotal | num }}</div>
        <div class="bottom">今日销售额：{{ totalData.sale | num }}</div>
      </div>
      <div class="item">总访问量
        <div class='num'>{{ totalData.viewsTotal | num }}</div>
         <div class="bottom">今日访问量：{{ totalData.views | num }}</div>
      </div>
      <div class="item">总收藏量
        <div class='num'>{{ totalData.collectTotal | num }}</div>
         <div class="bottom">今日收藏量：{{ totalData.collect | num }}</div>
      </div>
      <div class="item">总支付量
        <div class='num'>{{ totalData.payTotal | num }}</div>
         <div class="bottom">今日支付量：{{ totalData.pay | num }}</div>
      </div>
    </div>

      <!--2. 访问数据统计 ----------------->
      <div class="content">
      <div class="time-info" id='box13'>
        <div class="title">月销售额</div>
         <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="charts" style="width: 100%; height: 300px"></div>
      </div>
      <div class="area title" id="box1">
        <div class="title">商品销售比例分配</div>
        <div id="pie" style="width: 100%; height: 300px"></div>
      </div>
    </div>


    <!-- 3.  -->
     <!-- 最新内容 -->
     <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <p>今日订单数</p>
              <div>{{ orderData.curOrderCount }}</div>
            </el-col>
            <el-col :span="8">
              <p>汇总确认订单</p>
              <div>{{ orderData.curCollect }}</div>
            </el-col>
            <el-col :span="8">
              <p>累计订单</p>
              <div>{{ orderData.curMoney }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>本月订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <p>本月订单数</p>
              <div>{{ orderData.orderCount }}</div>
            </el-col>
            <el-col :span="8">
              <p>汇总确认订单</p>
              <div>{{ orderData.collect }}</div>
            </el-col>
            <el-col :span="8">
              <p>累计金额</p>
              <div>{{ orderData.money }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="text item">
<<<<<<< HEAD
          <el-button type="primary" @click="toProject">产品管理</el-button>
=======
          <el-button type="primary" @click="toProject">商品管理</el-button>
>>>>>>> e558facf022688ce3d835b65714b1b14b7cb08fa
          <el-button @click="toOrder">订单管理</el-button>
          <el-button @click="toSystem">系统管理</el-button>
        </div>
      </el-card>
    </div>

  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {
      totalData:{}, //首页数据统计
      orderData:{}, //首页订单信息
    }
  },
  created(){
    this.totalInfo()
    this.orderInfo()
    this.format()
  },
  mounted(){ //最早获取Dom元素的生命周期 挂载完毕
    // this.line(),
    // this.pie()  
  },
  methods:{
    toProject(){
      this.$router.push('/product/list')    
    },
    toOrder(){
<<<<<<< HEAD
      console.log('1111',this.$router);
      this.$router.push('/order/list')
    },
    toSystem(){
      this.$router.push('/product/list')    
=======
      //console.log('1111',this.$router);
      this.$router.push('/order/list')
    },
    toSystem(){
      this.$router.push('/System/role')    
>>>>>>> e558facf022688ce3d835b65714b1b14b7cb08fa
    },
    // 获取顶部数据统计
    async totalInfo(){
      let res  = await this.$api.totalInfo()
      //console.log('获取数据统计信息', res.data)
      this.totalData =  res.data.data.list
    },
    //  获取底部今日订单数据统计
    async orderInfo(){
      let res  = await this.$api.orderInfo()
      //console.log('获取今日订单统计信息', res.data)
      this.orderData =  res.data.list
    },
    // 获取图表动态数据
    async format(){
      let res = await this.$api.format()
      //console.log('获取图表动态数据',res.data.result.data.sale_money)
      let arr = res.data.result.data.sale_money
      let xarr=[],money=[],total=[],pieData=[]
      arr.forEach(item => {
        // 折线图数据
        xarr.push(item.name)
        total.push(item.num)
        money.push(item.total_amount)
        // 饼图数据
        let obj = {}
        obj.name = item.name
        obj.value = item.total_amount
        pieData.push(obj)
      });
      this.line(xarr,money,total)
      this.pie(pieData)
    },

    // 绘制折线图
    line(data,money,total){
       // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('charts'));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          'trigger': 'axis'
        },
        legend: {
          data: ['销售量','销售额']
        },
        xAxis: {
          data
        },
        yAxis: {},
        series: [
          {
            name: '销售额',
            type: 'line', // bar柱状图  line折线图  pie饼图 map地图
            data:money,
            smooth:true //线条平滑
          },
          {
            name: '销售量',
            type: 'bar', // bar柱状图  line折线图  pie饼图 map地图
            data: total
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      
    },
    // 绘制饼图
    pie(pieData){
      var myChart = echarts.init(document.getElementById('pie'));
      var option = {
        tooltip: {
          trigger: 'item',
          formatter:'{a} </br> {b} : {d}%'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '商品销售额',
            type: 'pie',
            radius: '50%',
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);  

    }
  },
  filters:{
    num(value){ // 212313 --212,313
      if(!value) return;
      return value.toLocaleString();
    }
  }
}
</script> 


<style lang="less" scoped>

.header {
  display: flex;

  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    // text-align: center;
    position: relative;

    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
    }

    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }

  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }

  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }

  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }

  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}

// 图表

.content {
  margin: 20px;
  display: flex;
  height: 320px;
  padding-left: 0 !important;

  p {
    font-size: 14px;
    padding-bottom: 8px;
  }

  .title {
    font-weight: 600;
  }
  .time-info {
    flex: 2;
    margin-right: 20px;
    padding: 10px;
    background-color: #fff;

  }

  .area {
    flex: 1;
    padding: 10px;
    background-color: #fff;
    // margin-right: 20px;
  }
}

//内容

.home-footer {
  display: flex;
  padding-left: 20px;
  margin-bottom: 20px;

  .box-card {
    flex: 1;
    margin-right: 30px;

    span {
      font-weight: 600;
    }
  }
  .item{
    text-align: center;
    font-size: 24px;
    color: #333;
    .el-col{
      border-right: 1px solid #eee;

    }
    .el-col:last-child{
      border-right: none;
    }
    .title{
      margin-bottom: 10px;
      font-size: 14px;
    }
  }
}
</style>